<template>
	<div class="step1">
		<div class="step1-form">
			<BasicForm @register="register">
				<template #fac="{ model, field }">
					<!-- <price-input v-model:value="price"></price-input> -->
					<a-input-group compact>
						<a-select v-model:value="model['pay']" class="pay-select">
							<a-select-option value="zfb"> 支付宝 </a-select-option>
							<a-select-option value="yl"> 银联 </a-select-option>
						</a-select>
						<FormItem>
							<a-input class="pay-input" v-model:value="model[field]" />
						</FormItem>
					</a-input-group>
				</template>
			</BasicForm>
		</div>
		<a-divider />
		<h3>说明</h3>
		<h4>转账到支付宝账户</h4>
		<p>
			如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
		</p>

		<h4>转账到银行卡</h4>
		<p>
			如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
		</p>
	</div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { BasicForm } from '#/components';
import { useForm } from '#/hooks';
import PriceInput, { Currency } from './component/PriceInput.vue';
import { Select, Input, Divider, FormItem } from 'ant-design-vue';
import { FormSchema } from '#/Form';

const step1Schemas: FormSchema[] = [
	{
		field: 'account',
		component: 'Select',
		label: '付款账户',
		required: true,
		defaultValue: '1',
		componentProps: {
			options: [
				{
					label: 'callback@126.com',
					value: '1',
				},
			],
		},
	},
	{
		field: 'fac',
		component: 'InputGroup',
		label: '收款账户',
		required: true,
		defaultValue: 'test@example.com',
		slot: 'fac',
	},
	{
		field: 'pay',
		component: 'Input',
		label: '',
		defaultValue: 'zfb',
		show: false,
	},
	{
		field: 'payeeName',
		component: 'Input',
		label: '收款人姓名',
		defaultValue: '周大壮',
		required: true,
	},
	{
		field: 'money',
		component: 'Input',
		label: '转账金额',
		defaultValue: '500',
		required: true,
		renderComponentContent: () => {
			return {
				prefix: () => '￥',
			};
		},
	},
];

export default defineComponent({
	components: {
		BasicForm,
		FormItem,
		[Select.name]: Select,
		ASelectOption: Select.Option,
		[Input.name]: Input,
		[Input.Group.name]: Input.Group,
		[Divider.name]: Divider,
		PriceInput,
	},
	emits: ['next'],
	setup(_, { emit }) {
		const price = reactive({
			fac: 'test@example.com',
			pay: 'zfb' as Currency,
		});

		const [register, { validate, setProps }] = useForm({
			labelWidth: 100,
			schemas: step1Schemas,
			actionColOptions: {
				span: 14,
			},
			showResetButton: false,
			submitButtonOptions: {
				text: '下一步',
			},
			submitFunc: customSubmitFunc,
		});

		async function customSubmitFunc() {
			try {
				console.log(price);

				setProps({
					model: { ...price },
				});
				const values = await validate();
				emit('next', values);
			} catch (error) {}
		}

		return { register, price };
	},
});
</script>
<style lang="less" scoped>
.step1 {
	&-form {
		width: 450px;
		margin: 0 auto;
	}

	h3 {
		margin: 0 0 12px;
		font-size: 16px;
		line-height: 32px;
		color: @text-color;
	}

	h4 {
		margin: 0 0 4px;
		font-size: 14px;
		line-height: 22px;
		color: @text-color;
	}

	p {
		color: @text-color;
	}
}

.pay-select {
	width: 20%;
}

.pay-input {
	width: 70%;
}
</style>
